<template>
  <div class="app-container pg-dict-list">
    <!-- top-search begin -->
    <div class="top-search top-more-search" v-show="showSearch">
      <el-form
        inline
        ref="searchForm"
        label-width="0"
        class="search-form"
        :class="{ 'show-more': showFormMore }"
        :model="searchForm">
        <el-form-item prop="dictName">
          <el-input
            v-model="searchForm.dictName"
            clearable
            placeholder="请输入字典名称"
            @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <el-form-item prop="dictType">
          <el-input
            v-model="searchForm.dictType"
            clearable
            placeholder="请输入字典类型"
            @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <el-form-item prop="status">
          <dg-dict-select
            dictType="sys_normal_disable"
            v-model="searchForm.status"
            clearable
            placeholder="请选择字典状态"
            @change="search()" />
        </el-form-item>
        <el-form-item prop="dateRange">
          <el-date-picker
            v-model="searchForm.dateRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item class="search-btn-part">
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- top-search end -->
    <!-- right-toolbar begin -->
    <right-toolbar ref="rightToolbar" :showSearch.sync="showSearch" @queryTable="search()">
      <template v-slot:operaBar>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleShow()">新增</el-button>
        <el-button
          type="danger"
          icon="el-icon-refresh"
          @click="handleRefreshCache()">刷新缓存</el-button>
      </template>
    </right-toolbar>
    <!-- right-toolbar end -->
    <!-- table begin -->
    <el-table ref="pageTable" class="page-table mt10" :data="tableData" border stripe>
      <el-table-column show-overflow-tooltip label="字典编号" prop="dictId" align="center" min-width="78" />
      <el-table-column show-overflow-tooltip label="字典名称" prop="dictName" align="center" min-width="98" />
      <el-table-column show-overflow-tooltip label="字典类型" prop="dictType" align="center" min-width="108" />
      <el-table-column label="状态" align="center" prop="status" min-width="78">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="备注" align="center" prop="remark" min-width="300" />
      <el-table-column show-overflow-tooltip label="创建时间" align="center" prop="createTime" min-width="158">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="112"
        fixed="right">
        <template slot-scope="scope">
          <div class="opera-row">
            <el-button class="opera-item" type="text" @click="handleDetail(scope.row.dictId, scope.row.dictType)">详情</el-button>
            <el-button class="opera-item" type="text" @click="handleShow(scope.row.dictId)">修改</el-button>
            <el-button class="opera-item" type="text" @click="handleDelete(scope.row.dictId)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- table begin -->
    <!-- page-pagination begin -->
    <pagination
      class="page-pagination"
      :total="total"
      :page-size="pageSize"
      :page-index="pageIndex"
      @change="pageChange" />
    <!-- page-pagination end -->

    <!-- dialog-dict begin -->
    <dialog-dict :show.sync="dialogDict" :id="dictId" :status="dialogType"></dialog-dict>
    <!-- dialog-dict end -->
  </div>
</template>

<script>
import mixin from '@/utils/filtermixin/mixin';
import listmixin from '@/utils/list-mixin';
import DialogDict from './components/dialog-dict';
import * as API_Dict_Type from '@/api/system/dict/type';

export default {
  name: 'pg-dict-list',
  dicts: ['sys_normal_disable'],
  components: {
    DialogDict
  },
  mixins: [mixin, listmixin],
  data () {
    return {
      searchForm: {
        dictName: undefined,
        dictType: undefined,
        status: undefined,
        dateRange: undefined
      },
      // 字典表格数据
      tableData: [],

      // 字典类型弹层
      dialogDict: false,
      dialogType: undefined,
      dictId: undefined,

      // 分页属性
      total: 0, // 记录总条数
      pageSize: 20, // 每页显示条数
      pageIndex: 1 // 当前页
    };
  },
  mounted () {
    this.search();
  },
  methods: {
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {页面查询}
    */
    search (_type) {
      let _params = this.MixinFilterParams(this.MixinClone(this.searchForm));
      if (_params.dateRange && _params.dateRange.length) {
        _params.beginTime = _params.dateRange[0];
        _params.endTime = _params.dateRange[1];
      };
      delete _params.dateRange;
      if (_type !== 'selectPage') {
        this.pageIndex = 1; // 重置翻页当前页
      };
      this.getPageData(_params);
    },
    /**
      * @date 2025/06/30
      * @author wolfMan
      * @description {查询字典类型列表}
    */
    getPageData (params) {
      let _params = {
        ...params,
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      };
      API_Dict_Type.getListService(_params).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
      });
    },
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {字典类型新增/修改}
    */
    handleShow (_id) {
      this.dictId = _id;
      this.dialogType = _id || _id === 0 ? 'edit' : 'new';
      this.dialogDict = true;
    },
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {跳转类型详情页面}
    */
    handleDetail (_id, _type) {
      let _route = {
        path: `/system/dict-data/index/${_id}`,
        query: {
          type: _type
        }
      };
      this.$router.push(_route);
    },
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {删除字典类型}
    */
    /** 删除按钮操作 */
    handleDelete(_id) {
      this.$modal.confirm(`是否确认删除字典编号为 ${_id} 的数据项？`).then(() => {
        return API_Dict_Type.delService(_id);
      }).then(() => {
        this.search();
        this.$msgSuccess('删除成功');
      }).catch(() => {});
    },
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {刷新字典类型}
    */
    handleRefreshCache () {
      API_Dict_Type.refreshService().then(() => {
        this.$msgSuccess('刷新成功');
        this.$store.dispatch('dict/cleanDict');
      });
    }
  }
};
</script>